<template>
  <div class="app-container">
		<!-- 查询区 -->
    <div v-if="queryList && queryList.length > 0" class="filter-container queryBox">
			<div class="queryList" :style="{height: formHeight+'px'}">
				<el-form ref="listQueryForm" :inline="true" :model="queryVariable" class="demo-form-inline btnHeight"  >
					<div class="queryListOne" v-for="(item,index) in queryList" :key="index" :class="item.queryBoxType == 'tree_select'?'treeBox':''">
						<el-form-item  v-if="item.queryBoxType == 'text'" :prop="item.prop+item.queryType" :label="item.label">
							<el-input
								v-model.trim="queryVariable[item.prop+item.queryType]"
								:placeholder="'请输入'+item.label"
								:clearable="true"
							/>
						</el-form-item>
						<el-form-item  v-if="item.queryBoxType == 'number'" :prop="item.prop+item.queryType" :label="item.label" >
							<el-input
								v-model.number.trim="queryVariable[item.prop+item.queryType]"
								type="number"
								:placeholder="'请输入'+item.label+',纯数字'"
								:clearable="true"
							/>
						</el-form-item>
						<el-form-item  v-if="item.queryBoxType == 'textarea'" :prop="item.prop+item.queryType" :label="item.label" >
							<el-input
								v-model.trim="queryVariable[item.prop+item.queryType]"
								type="textarea"
								placeholder="请输入内容"
								:clearable="true"
								:show-word-limit="true"
								:autosize="{ minRows: 3, maxRows: 5 }"
								:maxlength="100"
							/>
						</el-form-item>
						<el-form-item class="treeFormDYn" v-if="item.queryBoxType == 'tree_select'" :prop="item.prop+item.queryType" :label="item.label">
							<tree-select
							v-model="queryVariable[item.prop+item.queryType]"
							:options="item.options"
							:placeholder="'请选择'+item.label"
							:disable-branch-nodes="true"
							:searchable="true"
							:appendToBody="true"
							/>
						</el-form-item>
						<el-form-item  v-if="item.queryBoxType == 'select' || item.queryBoxType == 'multi_select'" :prop="item.prop+item.queryType" :label="item.label">
							<el-select
								v-model="queryVariable[item.prop+item.queryType]"
								:multiple="item.queryBoxType == 'select' ? false : true"
								:clearable="true"
								:placeholder="'请选择'+item.label"
								:filterable="true"
							>
								<el-option
									v-for="(item1,index1) in item.options"
									:key="index1"
									:label="item1.label"
									:value="item1.value"
								/>
							</el-select>
						</el-form-item>
						<el-form-item v-if="item.queryBoxType == 'cascade_select'" :prop="item.prop+item.queryType" :label="item.label" >
							<el-cascader
								v-model="queryVariable[item.prop+item.queryType]"
								clearable
								filterable
								:options="item.options"
							>
							</el-cascader>
						</el-form-item>
						<el-form-item v-if="item.queryBoxType == 'number_interval'" :prop="item.prop+item.queryType" :label="item.label" >
							<!-- 数字区间组件 -->
							<input-range :ref="item.prop" v-model="queryVariable[item.prop+item.queryType]" @numberRange="handleRange(item,$event)"></input-range>
						</el-form-item>
						<!-- 日期时间区间 -->
						<el-form-item v-if="item.queryBoxType == 'ymd_block'" :prop="item.prop+item.queryType" :label="item.label" >
							<el-date-picker
								v-model="queryVariable[item.prop+item.queryType]"
								type="datetimerange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"								
								:editable="true"
								:clearable="true"
								value-format="yyyy-MM-dd HH:mm:ss">
							</el-date-picker>
						</el-form-item>
						<!-- 时间框-年，区间 -->
						<el-form-item v-if="item.queryBoxType == 'time_y'" :prop="item.prop+item.queryType" :label="item.label" >
							<!-- 时间-年组件 -->
							<timey-range :ref="item.prop" v-model="queryVariable[item.prop+item.queryType]" @tiemyRange="handleRange(item,$event)" />
						</el-form-item>
						<!-- 时间框-月，区间 -->
						<el-form-item v-if="item.queryBoxType == 'time_y_m'" :prop="item.prop+item.queryType" :label="item.label" >
							<!-- 时间-月组件 -->
							<timeym-range :ref="item.prop" v-model="queryVariable[item.prop+item.queryType]" @tiemyRange="handleRange(item,$event)" />
						</el-form-item>
						<!-- 时间框-日，区间 -->
						<el-form-item v-if="item.queryBoxType == 'time_y_m_d'" :prop="item.prop+item.queryType" :label="item.label" >
							<!-- 时间-日组件 -->
							<timeymd-range :ref="item.prop" v-model="queryVariable[item.prop+item.queryType]" @tiemyRange="handleRange(item,$event)" />
						</el-form-item>
						<el-form-item  v-if="item.queryBoxType == 'time'" :prop="item.prop+item.queryType" :label="item.label">
							<el-time-picker
								v-model="queryVariable[item.prop+item.queryType]"
								:is-range="item.isRange"
								:placeholder="'请选择'+item.label"
								:start-placeholder="'请选择开始'+item.label"
								:end-placeholder="'请选择结束'+item.label"
								:editable="true"
								:clearable="true"
							/>
						</el-form-item>
						<el-form-item  v-if="item.queryBoxType == 'date'" :prop="item.prop+item.queryType" :label="item.label" >
							<el-date-picker
								v-model="queryVariable[item.prop+item.queryType]"
								:type="item.isRange?'daterange':'date'"
								:placeholder="'请选择'+item.label"
								:start-placeholder="'请选择开始'+item.label"
								:end-placeholder="'请选择结束'+item.label"
								:editable="true"
								:clearable="true"
								value-format="yyyy-MM-dd"
							/>
						</el-form-item>
						<!-- <el-form-item  v-if="item.queryBoxType == 'datetime'" :prop="item.prop+item.queryType" :label="item.label" >
							<el-date-picker
								v-model="queryVariable[item.prop+item.queryType]"
								:type="item.isRange?'datetimerange':'datetime'"
								:placeholder="'请选择'+item.label"
								:start-placeholder="'请选择开始'+item.label"
								:end-placeholder="'请选择结束'+item.label"
								:editable="true"
								:clearable="true"
								value-format="yyyy-MM-dd HH:mm:ss"
							/>
						</el-form-item> -->
					</div>
				</el-form>
			</div>
			<div :class="More?'queryBut':'queryBtn1'">
				<el-button class="filter-item" @click="handleSearch()" type="primary">查询</el-button>
      	<el-button class="filter-item" @click="handleReset()">重置</el-button>
      	<el-button v-if="More" @click="handleMore()" class="filter-item" >{{moreText}}</el-button>
			</div>
		</div>
		<!-- 按钮区 -->
		<div v-if="listBtnObjNoline && listBtnObjNoline.length>0" class="button-container btnBox">
			<template v-for="(item,index) in listBtnObjNoline" >
				<el-button
					v-if="!item.isLine && item.code != 'importExcel'"
					class="button-item"
					:key="index"
          :disabled="item.disabled"
					@click="btnAction(item.isTabCheck,item.action,item)"
				>
					<i :class="item.icon" />
					<span >{{item.label}}</span>

				</el-button>
				<el-upload
					v-if="!item.isLine && item.code == 'importExcel'"
					:key="index"
					class="importBox"
					:ref="'import-'+item.code"
					action=""
					:on-change="importExcel"
					:show-file-list="false"
					accept=".xlw,.xls,.xlsx"
					:auto-upload="false">
					<el-button slot="trigger" id="el-upload" class="filter-item" icon="el-icon-upload2">导入Excel</el-button>
				</el-upload>
			</template>
    </div>
		<!-- 表格区 -->
		<div @mouseenter="onMouseOver" @mouseleave="onMouseout" class="tableBox">
			<el-table
				:height="tableHeight"
				ref="filterTable"
				:data="listTable.tableData"
				v-loading="loading"
				border
				fit
				highlight-current-row
				style="width: 100%"
				@selection-change="selectionChange"
				row-key="id"
				:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
				@sort-change="sortChange"
				:header-cell-style="{'text-align': 'left'}"
			>
				<el-table-column fixed="left" v-if="listTable.isCheck" type="selection" width="50" align="center" />
				<template v-for="(item,index) in listTable.tableHeader" >
					<el-table-column
						:key="index"
						v-if="item.showed && !item.isParentId"
						:fixed="item.fixed == 'N'?false:(item.fixed == 'L'?'left':'right')"
						:prop="item.column"
						:label="item.name"
						header-align="center"
						:align="item.align"
						:min-width="item.width"
						:sortable="item.ordered?'custom':false"
						show-overflow-tooltip
					>
						<template slot-scope="scope" slot="header">
							<span >{{item.name}}</span>
							<span v-if="item.filtered"> 
								<el-popover
									placement="bottom"
									trigger="click"
									:ref="'popover-'+index"
									min-width="200"
									:popper-options="{ boundariesElement: 'viewport', removeOnDestroy: true }"
									>
									<i slot="reference"  @click.stop="filterIcon(item)" class="fa fa-filter iconTab"></i>
									<div>
										<span class="popName">{{item.name}}</span>
										<!-- 操作选择 -->
										<el-select v-model="tableHeaderVal[item.column]" value-key="value" @change="selChange(item.column,$event,scope.$index,item)" clearable placeholder="请选择操作选项">
											<el-option
												v-for="item1 in item.filterValues"
												:key="item1.value"
												:label="item1.label"
												:value="item1">
											</el-option>
										</el-select>
										<!-- 值 -->
										<span class="popVal" v-if="tableHeaderVal[item.column]">
											<template v-if="tableHeaderVal[item.column].queryBoxType == 'text'">
												<el-input
													class="popInput"
													v-model.trim="tabHeaderZiVal[item.column+tableHeaderVal[item.column].value]"
													:placeholder="'请输入'+item.name"
													:clearable="true"
												/>
											</template>
											<template v-if="tableHeaderVal[item.column].queryBoxType == 'number'">
												<el-input
													class="popInput"
													v-model.number.trim="tabHeaderZiVal[item.column+tableHeaderVal[item.column].value]"
													type="number"
													:placeholder="'请输入'+item.name+',纯数字'"
													:clearable="true"
												/>
											</template>
											<template v-if="tableHeaderVal[item.column].queryBoxType == 'select' || tableHeaderVal[item.column].queryBoxType == 'multi_select'">
												<el-select
													v-model="tabHeaderZiVal[item.column+tableHeaderVal[item.column].value]"
													:multiple="tableHeaderVal[item.column].queryBoxType == 'select' ? false : true"
													:clearable="true"
													:placeholder="'请选择'+item.name"
													:filterable="true"
												>
													<el-option
														v-for="item2 in item.filterQuery.options"
														:key="item2.id"
														:label="item2.label"
														:value="item2.value"
													/>
												</el-select>
											</template>
											<template v-if="tableHeaderVal[item.column].queryBoxType == 'time'">
												<el-time-picker
													v-model="tabHeaderZiVal[item.column+tableHeaderVal[item.column].value]"
													:is-range="tableHeaderVal[item.column].isRange"
													:placeholder="'请选择'+item.name"
													:start-placeholder="'请选择开始'+item.name"
													:end-placeholder="'请选择结束'+item.name"
													:editable="true"
													:clearable="true"
												/>
											</template>
											<template v-if="tableHeaderVal[item.column].queryBoxType =='date'">
												<el-date-picker
													v-model="tabHeaderZiVal[item.column+tableHeaderVal[item.column].value]"
													:type="tableHeaderVal[item.column].isRange?'daterange':'date'"
													:placeholder="'请选择'+item.name"
													:start-placeholder="'请选择开始'+item.name"
													:end-placeholder="'请选择结束'+item.name"
													:editable="true"
													:clearable="true"
													value-format="yyyy-MM-dd"
												/>
											</template>
											<template v-if="tableHeaderVal[item.column].queryBoxType =='datetime'">
												<el-date-picker
													v-model="tabHeaderZiVal[item.column+tableHeaderVal[item.column].value]"
													:type="tableHeaderVal[item.column].isRange?'datetimerange':'datetime'"
													:placeholder="'请选择'+item.name"
													:start-placeholder="'请选择开始'+item.name"
													:end-placeholder="'请选择结束'+item.name"
													:editable="true"
													:clearable="true"
													value-format="yyyy-MM-dd HH:mm:ss"
												/>
											</template>
										</span>
										<div class="popBottom">
											<el-button size="mini" type="default" @click="cancelPop(index)">取消</el-button>
    									<el-button type="primary" size="mini" @click="dateminePop(index,item,tableHeaderVal[item.column])">确定</el-button>
    									<!-- <el-button type="primary" size="mini" @click="dateminePop(index,item,tableHeaderVal[item.column],tabHeaderZiVal[item.column+tableHeaderVal[item.column].value])">确定</el-button> -->
										</div>
									</div>
								</el-popover>
							</span>
						</template>
						<template slot-scope="scope">
							<!-- <div v-if="item.webFilter" class="rowMain">{{viewRowData(scope.row, item.column) | item.webFilter(item.webFilterArr,item.webFilterProp)}}</div> -->
							<div v-if="item.webFilterProp  && !item.isBoolean" class="rowMain">
								<!-- 判断是否是树形结构   -->
								<div v-if="item.isTree">
									<span class="click-class" v-if="item.isRowClick">{{viewRowData(scope.row, item) | filterFunTree(item.webFilterArr,item.webFilterProp,item.webFilterValue,item.sign)}}</span>
									<span v-else>{{viewRowData(scope.row, item) | filterFunTree(item.webFilterArr,item.webFilterProp,item.webFilterValue,item.sign)}}</span>
								</div>
								<div v-else>
									<span class="click-class" v-if="item.isRowClick">{{viewRowData(scope.row, item) | filterFun(item.webFilterArr,item.webFilterProp,item.webFilterValue)}}</span>
									<span v-else>{{viewRowData(scope.row, item) | filterFun(item.webFilterArr,item.webFilterProp,item.webFilterValue)}}</span>
								</div>
							</div>
							<div v-else class="rowMain">
								<!-- 判断是否是布尔值 -->
								<div v-if="item.isBoolean">
									<span >{{viewRowData(scope.row, item) | filterFunBoolean(item.webFilterArr,item.webFilterProp,item.webFilterValue)}}</span>
								</div>
								<div v-else>
									<span class="click-class" v-if="item.isRowClick" @click="rowClick(item.rowClickAction,scope.row)">
										<span v-if="item.isDateTime">{{viewRowData(scope.row, item) | utoTime(item.filterQuery.frontendFormat) }}</span>
										<span v-else>{{viewRowData(scope.row, item)}}</span>
									</span>
									<span v-else>
										<span v-if="item.isDateTime">{{viewRowData(scope.row, item) | utoTime(item.filterQuery.frontendFormat) }}</span>
										<span v-else>{{viewRowData(scope.row, item)}}</span>
									</span>
								</div>
							</div>
						</template>
					</el-table-column>
				</template>
				<el-table-column
					v-if="listTable.isTableBtn"
					fixed="right"
					label="操作"
					prop="operationIsShow"
					width="240"
					align="center"
					>
					<template slot-scope="scope">
						<span class="elLink">
						<span v-if="operationIsShow(scope.row).length <= 3">
							<span  v-for="(item1,index3) in operationIsShow(scope.row)" :key="index3">
							<el-link
								class="elLinkBox"
								:icon="item1.icon"
								:underline="false"
								:type="item1.type"
								:disabled="item1.disabled"
								@click="tableLineAction(scope.row,item1.action)"
							>{{item1.label}}</el-link>
							</span>
						</span>

						<span v-else>
							<span  v-for="(item1,index3) in operationIsShow(scope.row)" :key="index3">
							<el-link
								class="elLinkBox"
								v-if="index3<2"
								:icon="item1.icon"
								:underline="false"
								:type="item1.type"
								:disabled="item1.disabled"
								@click="tableLineAction(scope.row,item1.action)"
							>{{item1.label}}</el-link>
							</span>
							<el-dropdown >
							<span class="drop-down-box">
								更多<i class="el-icon-arrow-down el-icon--right"></i>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item 
								v-for="(item1,index3) in operationIsShow(scope.row)" 
								:key="index3"
								v-if="index3>=2"
								:disabled="item1.disabled"
								@click.native="tableLineAction(scope.row,item1.action)"
								>
								{{item1.label}}
								</el-dropdown-item>
							</el-dropdown-menu>
							</el-dropdown>
						</span>
						
						</span>
					</template>
					</el-table-column>
			</el-table>
		</div>
		<!-- 分页区 -->
		<div v-if="listTable.showPage && total" class="pagination-container">
      <el-pagination
				ref="tablePage"
        :current-page.sync="pageParam.pageNum"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="pageParam.pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        style="margin-top: 15px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>

</template>
<script>
import draggable from 'vuedraggable'
import TreeSelect from '@riophae/vue-treeselect'
import InputRange from './inputRange'  //导入inputRange组件 数字区间组件
import TimeyRange from './timeyRange'  //导入timeyRange组件 年区间组件
import TimeymRange from './timeymRange'  //导入timeymRange组件 月区间组件
import TimeymdRange from './timeymdRange'  //导入timeymdRange组件 日区间组件

export default {
	name: 'DynTable',
	components:{TreeSelect, draggable,InputRange,TimeyRange,TimeymRange,TimeymdRange},
	props:{
		alias: {
		type: String,
		default () {
			return ''
		},
	  },
		eventName: {
			type: Object,
      require: true,
      default() {
        return {}
      }
		},
		queryParams: {
			type: Object,
      require: true,
      default() {
        return {
					pageNum: 1,
					pageSize: 20,
					sortBy: 'id',
					sortOrder: 'desc',
					q: ''
				}
      }
		},
		listBtnObj: {
      type: Array,
      default: ()=>[]
    },
		listTable: {
			type: Object,
      require: true,
      default() {
        return {
					total:null,
					showPage:false,
					isCheck:false,
					isTableBtn:false,
					tableData: [],
					tableHeader: []
        }
      }
		}


	},
  data() {
    return {
			queryList: [],
			hideText: false,
			moreText: "更多",
			formHeight: null,
			heightQuery: null,
			screenWidth: document.body.clientWidth,
			timer: false,
			More: false,
			listBtnObjNoline: [],
			drags:false,
			loading: false,
			tableHeaders: [],
			checkTabs: [],
			queryVariable: {},
			isActIndex: 0,
			tableHeaderVal: {},
			tabHeaderZiVal: {},
			setTabShow: false,
			tableHeight: -1,
			total: this.listTable.total?this.listTable.total:0,
			pageParam: {
        pageNum: 1,
				pageSize: 20,
				sortBy: 'id',
        sortOrder: 'desc',
        q: ''
      },

    }
  },
  created() {
		// this.tableHeaders = JSON.parse(JSON.stringify(this.listTable.tableHeader));
	},
	mounted(){
		
	},
	beforeDestroy() {
		window.removeEventListener("resize", this.initHeight);
		window.removeEventListener("resize", this.resizeHeight);
  },
	watch: {
		'listTable.tableHeader': {
			deep: true,
      immediate: true,
			handler: function (newValue,oldValue){
				this.listBtnObjNoline = []
				if(this.listBtnObj && this.listBtnObj.length>0){
					this.listBtnObj.forEach(item=>{
						if(!item.isLine){
						this.listBtnObjNoline.push(item)
						}
					})
				}
				if(this.listTable.tableHeader == undefined){
					this.listTable.tableHeader = []
				}
				if(this.listTable.tableData == undefined || this.listTable.tableData == '' || this.listTable.tableData == null){
					this.listTable.tableData = []
				}
				this.tableHeaders = JSON.parse(JSON.stringify(this.listTable.tableHeader));
				this.initHeight()
				this.resizeInitFn()
				this.getListQuerys();
			}
		},
		
	},
  methods: {
	  operationIsShow (row) {
		  if(row.operation && row.operation.length>0){
			row.operationIsShow = []
			for(let j = 0; j < row.operation.length; j++){
				if(row.operation[j].isShow){
					row.operationIsShow.push(row.operation[j])
				}
			}
		}
		if (row.operationIsShow) {
			return row.operationIsShow;
		}
		return []
	  },
	  	getDynDataValue (value, item) {
			if (item.isFile) {
				let valueText = '';
				if (value) {
					let valueArray = value.split(";");
					for (let i = 0; i < valueArray.length; i++) {
						if (i == 0) {
							valueText = JSON.parse(valueArray[i]).name
						} else {
							valueText = valueText + ';' + JSON.parse(valueArray[i]).name
						}
					}
           		 }
				return valueText
			} else {
				return value
			}
		},
	  	viewRowData (row, item) {
			const {column} = item
			if (!column) {
			   return "";
			}
			let arrData = column.split('.');
			if (arrData.length == 1) {
				let value = row[arrData[0]];
				return this.getDynDataValue(value, item)
			} else if (arrData.length == 2) {
				let value = null;
				if (arrData[0] === this.alias) {
					value = row[arrData[1]];
				} else {
					if (row[arrData[0]]) {
						value = row[arrData[0]][arrData[1]];	
					}
				}
				if (value) {
					return this.getDynDataValue(value, item)
				}
			}
			return "";
		},
		//表格内过滤器方法
		// filterFun(webFilter,webFilterArr,webFilterProp){
		// 	webFilter(webFilterArr,webFilterProp)
		// },
		resizeInitFn() {
			window.addEventListener("resize", this.initHeight, false);
		},
		//初始化form查询区高度
		initHeight(){
			this.$nextTick(()=>{
				if(this.queryList && this.queryList.length > 0){
					let hei = document.querySelector('.btnHeight').offsetHeight;
					if(this.moreText == '收起'){
							this.formHeight = hei;
						}else if(this.moreText == '更多'){
							this.formHeight = 38;
						}
					if(hei > 38){
						this.More = true;
					}else{
						this.More = false;
						this.moreText = "更多"
						this.hideText = false;
					}
				}
			this.resizeHeight()
			})
		},
		//把表格的头部中有filter的摘取出来赋值给查询区
		getListQuerys(){
			this.queryList = [];
			this.listTable.tableHeader.forEach((item,index)=>{
				if(item.showed && item.filterQuickQuery){
					this.queryList.push(JSON.parse(JSON.stringify(item.filterQuery)))
				}
			})
			// this.queryList.push({
			// 	"label": "金额2",
			// 	"prop": "salesContract.money2",
			// 	"queryBoxType": "number_interval",
			// 	"queryType": "_between"
			// })
			console.log('queryList',this.queryList)
		},
		handleRefresh(){
			this.total = this.listTable.total;
				// this.getListQuerys();
				// console.log('newValue贺鸣春',newValue)
			if(this.listTable.showPage){
				this.pageParam.pageNum = this.queryParams.pageNum
				this.pageParam.pageSize = this.queryParams.pageSize
			}
			this.$forceUpdate()
			this.resizeHeight()
		},
		//table高度计算
		resizeHeight() {
      this.$nextTick(()=>{
				const otherNum = (this.listTable.showPage && this.total) ? 60 : 34;
				this.tableHeight = this.getOffsetTop({
					self: this,
					otherNumber: otherNum,
					refTable: 'filterTable',
					refPage: 'tablePage'
				})
			})
    },
    resize() {
      this.resizeHeight()
      window.addEventListener('resize', this.resizeHeight, false)
    },
    removeResize() {
      window.removeEventListener('resize', this.resizeHeight, false)
    },
		//查询方法
    handleSearch(){
			this.$parent[this.eventName.search](this.queryVariable)
		},
		//重置方法
		handleReset(){
			this.queryVariable = {};
			this.queryList.forEach((item)=>{
				if(item.queryBoxType == 'number_interval' || item.queryBoxType == 'time_y' || item.queryBoxType == 'time_y_m' || item.queryBoxType == 'time_y_m_d'){
					this.$refs[item.prop][0].handleReset()
				}
			})
			this.$parent[this.eventName.reset]()
		},
		//更多方法
		handleMore(){
			if(this.hideText){
				this.formHeight = 38;
			}else{
				this.formHeight = document.querySelector('.btnHeight').offsetHeight;
			}

			this.hideText = !this.hideText
			this.moreText = this.hideText==true?'收起':'更多'
			this.initHeight()
		},
		//鼠标进入table显示操作按钮
		onMouseOver(){
			this.setTabShow = true;
		},
		//鼠标离开table隐藏操作按钮
		onMouseout(){
			this.setTabShow = false;
		},
		//按钮区点击事件
		btnAction(tabCheck,btnActs,item){
			if(item.isTabCheck && this.checkTabs.length == 0){
				this.$message({
          showClose: true,
          message: '请选择表格内容',
          type: 'warning'
				});
			}else{
				if(item.isTabCheck){
					this.$parent[item.action](this.checkTabs)
				}else{
					if(item.code != 'importExcel'){
						this.$parent[item.action]()
					}
				}

			}
		},
		//导入excel
		importExcel(file){
			const reader = new FileReader();
			reader.readAsDataURL(file.raw)
			reader.onload = (e) => {
				let excelFile = {}
				excelFile.base64Str = e.target.result;
				this.$parent['importExcel'](excelFile)
			}

		},
		//table中操作列的点击事件
		tableLineAction(row,lineActs){
			this.$parent[lineActs](row)
		},
		//table表格内中的点击事件
		rowClick(rowClickAction,row){
			this.$parent[rowClickAction](row)
		},
		// 记录选中行
    selectionChange(val) {
			this.checkTabs = val;
		},
		//点击表头的筛选按钮
		filterIcon(data){
			this.tableHeaderVal = {};
			this.tabHeaderZiVal = {};
			document.body.click();
			this.queryList.forEach((item)=>{
				if(item.prop == data.column && this.queryVariable[item.prop+item.queryType]){
					data.filterValues.forEach((item1)=>{
						if(item1.value == item.queryType){
							this.$set(this.tableHeaderVal,data.column,item1)
							this.$set(this.tabHeaderZiVal,data.column+this.tableHeaderVal[data.column].value,this.queryVariable[item.prop+item.queryType])
						}
					})

				}
			})
		},
		//点击表格排序
		sortChange(column){
			const orderObj = {
				name: column.prop,
				order: column.order
			}
			this.$parent[this.eventName.order](orderObj)
		},
		//表头筛选项里的取消
		cancelPop(index){
			this.$refs[`popover-`+index].forEach(item=>{
				item.doClose()
			})
		},
		//表头筛选项里的确定按钮
		dateminePop(index,items,queryTypeObj){
			if(queryTypeObj){
				if(this.tabHeaderZiVal[items.column+queryTypeObj.value]){
					this.queryList.map(item=>{
						if(item.prop == items.column){
							delete this.queryVariable[item.prop+item.queryType]
							item.queryType = queryTypeObj.value;
							item.queryBoxType = queryTypeObj.queryBoxType;
						}
						return item
					})
					this.$set(this.queryVariable,items.column+queryTypeObj.value,this.tabHeaderZiVal[items.column+queryTypeObj.value])
					this.$parent[this.eventName.search](this.queryVariable)
					this.$refs[`popover-`+index].forEach(item=>{
						item.doClose()
					})
					// this.$refs[`popover-`+index][2].doClose();
				}else{
					this.$message({
						showClose: true,
						message: items.name+"的值不能为空",
						type: 'warning'
					});
				}
			}else{
				this.$message({
          showClose: true,
          message: '请选择操作选项',
          type: 'warning'
				});
			}
		},
		//表头筛选项里的确定按钮
		// dateminePop(index,items,queryTypeObj,queryTypeVal){
		// 	if(queryTypeObj){
		// 		if(queryTypeVal){
		// 			this.queryList.map(item=>{
		// 				if(item.prop == items.column){
		// 					delete this.queryVariable[item.prop+item.queryType]
		// 					item.queryType = queryTypeObj.value;
		// 					item.queryBoxType = queryTypeObj.queryBoxType;
		// 				}
		// 				return item
		// 			})
		// 			this.$set(this.queryVariable,items.column+queryTypeObj.value,queryTypeVal)
		// 			this.$parent[this.eventName.search](this.queryVariable)
		// 			// this.$refs[`popover-`+index][0].doClose();
		// 			// this.$refs[`popover-`+index][1].doClose();
		// 			this.$refs[`popover-`+index].forEach(item=>{
		// 				item.doClose()
		// 			})
		// 			// this.$refs[`popover-`+index][2].doClose();
		// 		}else{
		// 			this.$message({
		// 				showClose: true,
		// 				message: items.name+"的值不能为空",
		// 				type: 'warning'
		// 			});
		// 		}
		// 	}else{
		// 		this.$message({
    //       showClose: true,
    //       message: '请选择操作选项',
    //       type: 'warning'
		// 		});
		// 	}
		// },
		//表头中select的操作选择
		selChange(ids,val,index,item){
			//tabHeaderZiVal[item.column+tableHeaderVal[item.column].value]
			// this.tabHeaderZiVal[item.column+this.tableHeaderVal[item.column].value] = ''
			
			
		},
		// 数字区间,时间年区间,月区间，日区间
		handleRange(item,val){
			this.queryVariable[item.prop+item.queryType] = val
		},
		//点击设置按钮显示拖拽区
		turnDrag(){
			this.tableHeaders = JSON.parse(JSON.stringify(this.listTable.tableHeader));
			// console.log('tableHeaders',this.tableHeaders)
			this.drags = !this.drags;
		},
		//点击拖拽区的确定按钮
		datemineBtn(){
			// this.$emit('initTable',this.queryVariable)
			this.$parent[this.eventName.drags](this.tableHeaders)
			this.drags = false;
			this.getListQuerys();
			this.initHeight();
			this.$nextTick(() => {
        this.$refs.filterTable.doLayout()
      })
		},
		doLayoutTable(){
			// alert(1)
			this.$refs.filterTable.doLayout()
		},
		//点击拖拽区的取消按钮
		cancelBtn(){
			this.tableHeaders = JSON.parse(JSON.stringify(this.listTable.tableHeader));
			this.drags = false;
		},
		//开始拖拽事件
    onStart(){
      this.drag = true;
    },
    //拖拽结束事件
    onEnd() {
		 this.drag = false;
		},
		//分页中每页的个数
		handleSizeChange(val) {
			this.$set(this.pageParam,'pageSize',val)
			this.$parent[this.eventName.page](this.pageParam)

		},
		//分页中哪一页
    handleCurrentChange(val) {
			this.$set(this.pageParam,'pageNum',val)
			this.$parent[this.eventName.page](this.pageParam)
    },
		/**
		 * 计算表格总体高度
		 * @param obj
		 *   dom: 当前元素距离视口绝对高度
		 *   pagination： 分页容器高度
		 *   marginTop:分页容器marginTop
		 *   otherNumber: 其他高度值之和
		 *   refTable: table的ref值
		 *   refPage: page的ref值
		 *
		 * @returns {number}
		 */
		getOffsetTop(obj){
			const self = obj.self
			const refTable = obj.refTable
			const refPage = obj.refPage
			let pagination = null
			if (self.$refs[refPage]) {
				pagination = self.$refs[refPage].$el
				pagination.style.display = 'block'
			}
			const clientHeight = document.documentElement.clientHeight
			const marginTop = obj.marginTop || 5
			const otherNumber = obj.otherNumber || 0
			const otherHeightSum = pagination ? pagination.clientHeight + otherNumber : marginTop + otherNumber
			if (!self.$refs[refTable]) {
				return 0
			}
			let table = self.$refs[refTable].$el
			let iTop = table.offsetTop
			while (table.offsetParent) {
				table = table.offsetParent
				iTop += table.offsetTop
			}
			const height = clientHeight - (iTop + otherHeightSum)
			return height
		}

  }
}
</script>
<style lang="scss" scoped>
 @import '../../styles/common';
  .queryBox{
    display: flex;
    padding: 24px 19px 0 24px;
    border-radius: 4px 4px 0 0;
    margin-bottom: 0;
    .queryList{
      height: 52px;
      flex: 1;
      overflow: hidden;
      .queryListOne{
        display: inline-block;
        //padding-right: 15px;
        .el-form-item--mini.el-form-item{
          margin-bottom: 24px !important;
        }
      }
      .hideText{
        height: 52px;
        overflow: hidden;
      }
    }
    .queryBut{
      width: 190px;
    }
    .queryBtn1{
      width:125px;
    }
  }
  .btnBox{
    padding: 6px 24px;
    margin: 0;
	.button-item{
      display: inline-block;
      vertical-align: middle;
      margin-bottom: 10px;
    }
    .importBox{
      display: inline-block;

    }
  }
  .tableBox{
    position: relative;
	padding: 0 24px 24px 24px;
    .rowMain{
      display:inline-block;
      // width: 100%;
    }
    .elLink{
      white-space: nowrap;
      .elLinkBox{
        padding: 0 5px;
      }
    }

  }
  .popName{
    padding-right:10px;
  }
  .popVal{
    padding-left:10px;
    .popInput{
      width:200px;

    }
  }

  .popBottom{
    text-align: center;
    padding:10px 10px 0 10px;
  }
  .iconTab{
    margin-left: 5px;
    cursor: pointer;
  }
  .rightFloat{
    position:absolute;
    right:0;
    top: 0;
    z-index: 8;
    .rightFloatIcon{
      float: right;
      width: 48px;
      height: 48px;
      text-align: center;
      line-height: 48px;
      background: #fff;
      border: 1px solid #dfe6ec;
      cursor: pointer;
    }
    .rightFloatBox{
      margin-top:48px;
      background: #fff;
      .titHeader{
        padding:0 10px;
      }
      .butBox{
        text-align: center;
        padding-top:10px;
      }
    }
  }

  .itxst {
    padding: 10px;
    border: 1px solid #dfe6ec;
  }
  .item {
    padding: 6px 12px;
    border: solid 1px #eee;
    background-color: #efe1e1;
    text-align: left;
  }
  .item + .item {
    border-top: none;
    margin-top: 6px;
  }
  .mover {
    background-color: #fdfdfd;
    cursor: move;
    float:right;
    height: 23px;
    width: 23px;
    text-align: center;
  }
  .el-checkbox {
    margin-right: 10px !important;
  }
  .el-radio {
    margin-right: 10px !important;
  }

  .el-button+.importBox {
      margin-left: 5px !important;
  }
  .click-class{
    color: #60bdef;
    cursor: pointer;
  }
  .table-main-column{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display:inline-block;
    width: 100%;
    cursor:pointer;
    text-align: center;
    vertical-align: middle;
  }

.treeFormDYn .vue-treeselect__control{
  height: 28px;
}
.treeBox{
	// position: absolute;
}
</style>
<style lang="scss">

.treeFormDYn .el-form-item__content{
	width: 240px !important;
}
.treeBox{
	position: relative;
}
.treeBox .treeFormDYn{
	// position: absolute;
}
.treeBox .treeFormDYn .vue-treeselect__menu-container{
	position: relative;
	z-index: 9999;
}
.treeBox .treeFormDYn .el-form-item__menu{
	// position: absolute;
	z-index: 9999;
}
</style>

